.page-user {
    .user-info {
        padding: 10px 15px;
        margin: 0 0 10px 0;
        border: 1px solid var(--color-grey-lighter);
        border-radius: 0;
        font-family: consola;

        .user-info-item:not(:last-of-type) {
            margin-bottom: 10px;
        }

        .user-info-item {
            height: 25px;

            .user-info-title {
                width: 6rem;
                height: 25px;
                line-height: 25px;
                text-align: right;
                font-size: 0.75em;
                color: var(--color-grey-light);
                float: left;

                &:after {
                    content: ":";
                }
            }

            .user-info-content {
                height: 25px;
                line-height: 25px;
                margin-left: 6.25rem;
                font-size: 0.85em;
                color: var(--color-grey);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}

@media (min-width: 768px) {
    .page-user {
        .user-info {
            padding: 10px 15px;
            margin: 0 0 10px 5px;
            border: 1px solid var(--color-grey-lighter);
            flex: 0 0 calc(66.666667% - 10px);
            border-radius: 0 5px 0 0;

            .user-info-item {
                .user-info-title {
                    width: 7rem;
                }

                .user-info-content {
                    margin-left: 7.25rem;
                }
            }
        }
    }
}
